<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>友和动态</title>
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/news.css" />
    <link rel="stylesheet" href="css/layout.css" />
    <link rel="stylesheet" href="css/menu.css" />
    <link rel="stylesheet" href="css/animate.css" />
    <link rel="stylesheet" href="css/swiper-img.css" />

    <script src="libs/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script
      src="libs/greensock/TweenMax.min.js"
      type="text/javascript"
    ></script>
    <script
      src="libs/greensock/CustomEase.min.js"
      type="text/javascript"
    ></script>
    <script src="libs/swiper-bundle.min.js" type="text/javascript"></script>

    <style>
      .rich_container img {
        max-width: 100%;
      }
      .rich_title {
        font-size: 24px;
        font-family: "NotoSerifCJKsc";
        text-align: center;
        margin-bottom: 10px;
      }
      .rich_time {
        margin-bottom: 30px;
        font-size: 14px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="main_cover"></div>
    <nav id="site_header" class="news_header"></nav>
    <nav id="top_menu" class="news_top_menu"></nav>

    <section class="o_page news_page">
      <div class="o_hero_area">
        <div class="m_navName">
          <a href="javascript:history.back();">
            <div class="m_navName_inner">
              <span>返</span>
              <span>回</span>
            </div>
          </a>
        </div>
      </div>

      <div class="o_container">
        <div class="o_container_inner">
          <div class="o_container_content">
            <div class="rich_title"></div>
            <div class="rich_time"></div>
            <div class="o_section rich_container"></div>
          </div>
        </div>
      </div>

      <div class="o_hero_area" style="margin-top: 50px">
        <div class="m_navName">
          <a href="javascript:history.back();">
            <div class="m_navName_inner">
              <span>返</span>
              <span>回</span>
            </div>
          </a>
        </div>
      </div>
    </section>
    <nav id="site_footer"></nav>
  </body>

  <script>
    function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    }
    setTimeout(() => {
      let id = getQueryString("id");
      if (!id) return;
      $.ajax({
        url: "http://test.yuwa.cn/index.php/api/news/detail",
        data: { id: id || 16 },
        success: function (res) {
          console.log(res);
          document.querySelector(".rich_title").innerHTML = res.data.title;
          document.querySelector(".rich_time").innerHTML = res.data.create_time;
          document.querySelector(".rich_container").innerHTML =
            res.data.content;
        },
      });
    }, 1000);
  </script>
  <script src="js/utils.js" type="text/javascript"></script>
  <script src="js/menu.js" type="text/javascript"></script>
</html>
